<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <title>客房情况</title>
    <link href="css/main.css" rel="stylesheet" type="text/css">
    <link href="bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<div class="tabe_div" >
    <p class="p_line text_ient"><a class="find_a">权限名称：</a>
        <input v-model="sreachname" type="text" class="form_input text_ient" placeholder="输入名称"/>
        <input v-model="sreachurl" type="text" class="form_input text_ient" placeholder="输入路径"/>
        <el-button type="primary" @click="handleCurrentChange(1)">查询</el-button>
    <p>
    <p class="p_table">
        <a href="#" class="a_add" id="add_box" @click="handleAdd">添加</a><a href="#" class="a_add">全部导出</a>
    </p>
    <div>
        <el-table ref="adminTable"
                       :data="page"
                       style="width: 100%;"
                      >
        <el-table-column label="编号" width="100" align="center">
                <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column>
        <el-table-column label="帐号" align="center">
            <template slot-scope="scope">{{scope.row.name}}</template>
        </el-table-column>
        <el-table-column label="资源路径" align="center">
                <template slot-scope="scope">{{scope.row.url}}</template>
        </el-table-column>
        <el-table-column label="资源描述" align="center">
                <template slot-scope="scope">{{scope.row.description}}</template>
        </el-table-column>
        <el-table-column label="添加时间" width="160" align="center">
                <template slot-scope="scope">{{scope.row.createTime}}</template>
         </el-table-column>
        <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
                <el-button size="mini"
                           type="text"
                           @click="handleUpdate(scope.$index, scope.row)"
                       >
                    编辑
                </el-button>
                <el-button size="mini"
                           type="text"
                           @click="handleDelete(scope.$index, scope.row)"
                        >删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

        <el-dialog
                :title="isEdit?'编辑用户':'添加用户'"
                :visible.sync="dialogVisible"
                width="40%" height="200px">
            <el-form :model="admin"
                     ref="adminForm"
                     label-width="150px" size="small">
                <el-form-item label="权限名称：">
                    <el-input v-model="admin.name" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="url：">
                    <el-input v-model="admin.url" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="资源描述：">
                    <el-input v-model="admin.description"
                              type="textarea"
                              :rows="5"
                              style="width: 250px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</div>
<el-pagination
        background
        style="position: absolute;bottom: 0px"
        @current-change="handleCurrentChange"
        layout="total,prev, pager, next"
        :current-page.sync="pageNum"
        :page-size="pageSize"
        :total="total">
</el-pagination>
</div>
<script>
    const defaultAdmin = {
        id: null,
        name: null,
        url:null,
        description: null,
        status: 1
    };
    var v=new Vue({
        el:"#app",
        data:{
            sreachname:"",
            sreachurl:"",
            pageNum:1,
            pageSize:"5",
            total:"",
            page:[],
            isEdit:true,//true编辑/false添加
            dialogVisible:false,//对话框否显示
            admin: Object.assign({}, defaultAdmin),
        },
        created() {
            this.handleCurrentChange();
        },
        methods:{
            handleCurrentChange(val){
                let params=new URLSearchParams();
                params.append("pageNum",val==null?this.pageNum:val);
                params.append("pageSize",this.pageSize);
                params.append("sreachname",this.sreachname);
                params.append("sreachurl",this.sreachurl);
                axios.post("cs-manage/umsResource/listAll",params).then(res=>{
                    this.page=res.data.data.records;
                    this.total=res.data.data.total;
                });
            },
            handleDelete(index, row){
                this.$confirm('是否要删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    axios.get("cs-manage/umsResource/delete/"+row.id).then(res=>{
                        console.log(res.data.message)
                        this.$message({
                            message: res.data.message
                        });
                        this.handleCurrentChange(1);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                    row.status=!row.status;
                });
            },
            handleDialogConfirm(){
                var url="cs-manage/umsResource/";
                if (this.isEdit==true){
                    url+="edit";
                }else {
                    url+="add";
                }
                axios.post(url,this.admin).then(res=>{
                    this.$message({
                        type: 'info',
                        message: res.data.message
                    });
                    console.log(res);
                    if (res.data.code!=404){
                        this.dialogVisible=false;
                        this.handleCurrentChange(1);
                    }
                })

            },
            handleUpdate(index, row){
                this.isEdit=true;
                this.dialogVisible=true;
                this.admin = Object.assign({},row);
                this.admin.createTime=null;
            },
            handleAdd(){
                this.isEdit=false;
                this.dialogVisible=true;
            }
        }

    })
</script>
</body>
</html>
